<template>
	<!-- 佣金明细详情页面 -->
	<view class="content">
		<view style="height:180rpx;">
		<view class="fix_topp">
		<view class="tptop">预计佣金：+0.00元</view>
		<view class="tpul">
			<view :class="[ tpli_active ==index ? 'tpli tpli_active' : 'tpli']"  v-for="(tpul,index) in tpul" :key="index" @tap="changetpli(index)">{{tpul}}</view>
		</view>
		</view>
		</view>
		
		<view v-if="showdan">
			<view class="danul">
				<view class="danli" v-for="(dan,index) in dan">
					<view class="danli_box">
						<view class="danli_box_tp">
							<view class="danli_box_tp_left">
								<image :src="dan.src" mode="widthFix"></image>
								<view class="name">{{dan.name}}</view>
							</view>
							<view class="danli_box_tp_right">{{dan.active}}</view>
						</view>
						<view class="danli_box_cen">
							<view class="danli_box_text">订单编号:{{dan.bianhao}}</view>
							<view class="danli_box_text">
							{{dan.title}}
							</view>
							<view class="danli_box_text">订单价格：¥{{dan.money}}</view>
							<view class="danli_box_text">下单时间：{{dan.time}}</view>
						</view>
						<view class="danli_box_bt">
							<view class="danli_box_bt_left">邀请码：{{dan.ma}}</view>
							<view class="danli_box_bt_right">预计佣金：
							<text style="color:#ff80c0">分享奖：{{dan.fen}}</text>
							<text style="color:#ff80c0;margin-left:15rpx;">推荐奖：{{dan.tui}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- showdan=false,没有订单展示 -->
		<view v-else class="nodan_box">
			<image src="../../static/nolist.png" mode="widthFix" class="nodan_img"></image>
			<view class="nodan_text">暂时没有任何数据</view>
		</view>
		
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				tpli_active:0,
				tpul:['所有','待审核','待打款','已打款','无效'],
				showdan:true, //showdan=false,没有订单展示
				dan:[
					{
						src:'http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132',
						name:'超哥我男神',
						active:'已完成',
						bianhao:'ME20200819100621050775',
						title:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏！',
						money:'15.90',
						time:'2020-08-19 10:06:21',
						ma:324232,
						fen:0.3,
						tui:1
					}
				]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			changetpli(index){
				this.tpli_active=index;
			},
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.fix_topp{
		width:100%;
		height:180rpx;
		position: fixed;
		top:0;
		z-index: 999;
	}
	.tptop{
		padding:20rpx 0;
		text-indent: 30rpx;
		color:#fff;
		background-color: #ff80c0;
		font-size:30rpx;
	}
	.tpul{
		width:100%;
		border-bottom: 2rpx solid #EDEDED;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
	}
	.tpli{
		flex:1;
		padding:25rpx 0;
		text-align: center;
		white-space: nowrap;
		font-size: 28rpx;
		color:#666;
	}
	.tpli_active{
		border-bottom: 4rpx solid #ff80c0;
		color:#ff80c0;
	}
	.nodan_box{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.nodan_img{
		width:250rpx;
		margin:150rpx auto 50rpx;
	}
	.nodan_text{
		color:#666;
		text-align: center;
		width:100%;
	}
	.danli{
		margin-top:25rpx;
		width:100%;
		background-color: #fff;
		padding:20rpx 0;
	}
	.danli_box{
		width:90%;
		margin:0 auto;
	}
	.danli_box_tp{
		width:100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom:30rpx;
	}
	.danli_box_tp_left{
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.danli_box_tp_left image{
		width:80rpx;
		border-radius: 50rpx;
		margin-right:15rpx;
	}
	.danli_box_tp_right{
		color:#666;
	}
	.danli_box_cen{
		padding-bottom:20rpx;
		border-bottom:2rpx solid #EDEDED;
		color:#666;
	}
	.danli_box_text{
		margin-top:5rpx;
	}
	.danli_box_bt{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top:20rpx;
	}
	.danli_box_bt_left{
		width:30%;
	}
	.danli_box_bt_right{
		width:70%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>
